<template>
	<view class="cer-page">
		<view class="padd-top48 padd-left32 font_s42 cr-333 font_w600 line-height100">
			获奖证书
		</view>
		<view class="padd-left32 cr-666 font_s28 mar-top37 line-height100">
			荣誉获奖证书
		</view>
		<view v-if="list.length" class="flex flex-wrap padd-left32 padd-right31 mar-top20">
			<view v-for="(item,index) in list" :key="index" class="cer-box flex ">
				<image class="cer-img" :src="`https://www.worldintek.com:39011/yaolexue-service/${item.originalLink}`"></image>
				<view class="flex1 mar-left20 padd-top20 padd-bottom23">
					<view class="font_s30 cr-333 line-height100 cer-title">
						{{item.title}}
					</view>
					<view class="cr-999 font_s26 text_right">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
		<block v-else>
			<u-empty mode="list" marginTop="100">
			</u-empty>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				noMore:false,
				list:[]
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(!this.noMore) this.getList()
		},
		methods:{
			getList(){
				this.$http.get(`/yaolexue-service-portal/exam/pageMemberCertificate`,{
					limit:20,
					page:this.page
				}).then(res => {
					if(res.code === 200){
						if(this.page == 1) this.list = []
						this.list = [...this.list,...res.data.items]
						this.noMore = this.list.length >=  res.data.total
						this.page++
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cer-page {
		min-height: 100vh;
		background: #F7FDFF;
	}

	.cer-box {
		width: 100%;
		margin: 29rpx 0 0 0;

		.cer-img {
			width: 324rpx;
			height: 231rpx;
			background: #E1E1E1;
			border-radius: 10rpx;
		}

		.cer-title {
			line-height: 52rpx;
			height: 155rpx;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			/* 设置需要显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>